<template>
	<u-popup @close="closepop" :show="visible" mode="center" overlayOpacity="0.4" round="20rpx">
		<view class="popup">
			<view class="pop-title">系统通知
				<view class="close-icon" @click="closepop"></view>
			</view>
			<view class="pop-main">
				<slot></slot>
			</view>
			<view class="pop-btn">
				<u-button :style="`background-color:${btnColor};color: ${btnColor=='#476ffe'?'#fff':'#666'}`"
					@click="closepop">{{btnText}}</u-button>
			</view>
		</view>
	</u-popup>
</template>

<script setup>
	import {
		ref,
		defineProps
	} from 'vue';

	const props = defineProps({
		visible: {
			type: Boolean,
			required: true
		},
		btnColor: {
			type: String,
			required: true
		},
		btnText: {
			type: String,
			required: true
		},
	});

	const visible = ref(props.visible);
	const btnColor = ref(props.btnColor);
	const btnText = ref(props.btnText);
 
	const closepop = () => {
		visible.value = false;
	};
</script>

<style lang="scss" scoped>
	.popup {
		position: fixed;
		top: 560rpx;
		left: 52rpx;
		width: 646rpx;
		border-radius: 16rpx;
		background-color: #ffffff;
	}

	.pop-title {
		position: relative;
		height: 116rpx;
		line-height: 116rpx;
		text-align: center;
		font-size: 36rpx;
		font-weight: 600;
		border-bottom: 1rpx solid #f2f4f7;

		.close-icon {
			position: absolute;
			top: 34rpx;
			right: 28rpx;
			width: 48rpx;
			height: 48rpx;
			background: url("@/static/imgs/arrow_back.png");
			background-size: 100% 100%;

		}
	}

	.pop-btn {
		margin: 36rpx 30rpx;
		border-radius: 12rpx;
	}
</style>